<template>
  <div class="Personal">

    <!-- 头像 -->
    <div class="Personal_img" v-if="$store.state.userInfo">
      <div>
        <img
          v-if="$store.state.userInfo&&$store.state.userInfo.avatar == ''"
          src="@/assets/imgs/mine_tx_moren.png"
          alt="头像"
        />
        <img v-else :src="$store.state.userInfo.avatar" alt="头像" />
      </div>
      <div class="Personal_headNickname">
        <router-link to="/members">
          <span style="color: #fff">{{ $store.state.userInfo.nick || '' }}</span
          ><img
            v-if="$store.state.userInfo&&$store.state.userInfo.isVip==1"
            class="icon_Vip"
            src="@/assets/imgs/wode_tag_vip.png"
            alt="会员"
          />
        </router-link>
      </div>
    </div>

    <!-- 账户余额 -->
    <div class="Personal_money">
      <div class="money_left">
        <p v-if="$store.state.userInfo">{{ priceFil($store.state.userInfo.balance,2) }}</p>
        <span style="fontsize: 1vw">账户余额</span>
      </div>
      <span  @click="goPage('/withdrawal')" class="money_right">提现</span>
    </div>

    <div class="personalAssembly">
      <!-- 单击栏 -->
      <Assembly :data="data" />
    </div>
  </div>
</template>

<script>
import Assembly from "@/components/Assembly";
export default {
  data() {
    return {
      data: [
        {
          imgUrl: require("../assets/imgs/wode_icon_mingxi.png"),
          pathUrl: "/account_details",
          title: "账户明细",
        },
        {
          imgUrl: require("../assets/imgs/wode_icon_jihuoma.png"),
          pathUrl: "/activation_code",
          title: "激活码",
        },
        {
          imgUrl: require("../assets/imgs/wode_icon_tuandui.png"),
          pathUrl: "/my_team",
          title: "我的团队",
        },
      ],
      imgUrl: "https://xueyizhi.oss-cn-shenzhen.aliyuncs.com/",
    };
  },
  components: {  Assembly },
  methods: {
    //获取用户信息
    getAccountUserInfo() {
      let _self = this;
      this.$Api.getAccountUserInfo().then((res) => {
        if (res.code == 1) {
          _self.userInfo=res.data;
        }
      });
    },
    goPage(url){
      if (!this.$store.state.isBind) {
        this.$store.commit("showBandPhone", true);
        this.$toast("请先绑定手机");
        return;
      }
      this.$router.push(url)
    },
    priceFil: (data, num) => {
      if(data>0){
        return data.toFixed(num);
      }else{
        return "0.00"
      }
    },
  },
  created(){
    // if(!this.$store.state.userInfo && this.$store.state.userInfo!=''){
    //   this.getAccountUserInfo()
    // }
  },
  filters: {
    //保留2位小数点过滤器 不四舍五入
    number(value) {
      var toFixedNum = Number(value).toFixed(3);
      var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
      return realVal;
    },
  },

};
</script>

<style scoped>
.personalAssembly {
  position: relative;
  top: -52px;
}
.Personal {
  background: #f8f8f8;
}
.Personal_img {
  background: url("../assets/imgs/wode_bg.png") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 64px 0 140px 0;
}
.Personal_img img[alt="头像"] {
  width: 142px;
  height: 142px;
  border-radius: 100%;
}
.Personal_headNickname .icon_Vip {
  width: 44px;
  height: 44px;
  margin-left: 22px;
}

.Personal_money {
  margin: 0 25px;
  padding: 0 42px 0 38px;
  height: 262px;
  position: relative;
  top: -80px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
}

.Personal_money .money_left p {
  font-size: 50px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #333333;
}

.Personal_money .money_left span {
  display: flex;
  justify-content: start;
  font-weight: 400;
  color: #999999;
  font-family: PingFang SC;
  font-size: 28px;
}

.Personal_money .money_right {
  width: 155px;
  height: 60px;
  color: #fff;
  text-align: center;
  background: #f7831a;
  border-radius: 50px;
  line-height: 60px;
}
</style>